{% extends 'base/base.html' %}
{% block main %}

<div class="d-flex justify-content-between align-items-center mb-24">
  <h1 class="h3 m-0">文章列表</h1>

</div>

<div class="card p-4">
  <ul class="list-group list-group-flush">
    {% for article in object_list %}
      <li class="list-group-item">
        <div class="d-flex justify-content-between align-items-start">
          <div class="me-3">
            <a class="h5 d-block mb-1 text-decoration-none" href="{% url 'user:detail' article.id %}">{{ article.title }}</a>
            <p class="m-0 muted">{{ article.content }}</p>
          </div>
          <div class="btn-group">
            <a class="btn btn-outline-secondary" href="{% url 'main:update' article.id %}" role="button">编辑</a>
            <a class="btn btn-danger" href="{% url 'user:delete' article.id %}" role="button">删除</a>
          </div>
        </div>
      </li>
    {% empty %}
      <li class="list-group-item">暂无文章</li>
    {% endfor %}
  </ul>
</div>

<nav class="mt-24" aria-label="分页">
  <ul class="pagination">
    {% if page_obj.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <span class="page-link">上一页</span>
      </li>
    {% endif %}

    {% for pn in paginator.page_range %}
      <li class="page-item {% if page_obj.number == pn %}active{% endif %}">
        <a class="page-link" href="?page={{ pn }}">{{ pn }}</a>
      </li>
    {% endfor %}

    {% if page_obj.has_next %}
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <span class="page-link">下一页</span>
      </li>
    {% endif %}
  </ul>
</nav>
{% endblock %}